<template>
  <div class="main">
    <div class="center">
      <div class="head">
        <h1>{{jobDetailData.title}}</h1>
        <!-- <p>MT61北京Ⅰ设计-UI社招</p> -->
      </div>
      <div class="body">
        <p v-html="jobDetailData.content"></p>
        <!-- <div class="title">职位要求</div>
        <p>
          1、负责公司产品(Android/iOS/PC)的视觉设计工作;
          2、和产品交互一起构思与创意，灵活提供视觉解决方案;
          3、关注设计产品功能点数据变化，及时调整;
          4、时刻分析监控流行产品设计趋势，研究目标用户审美倾向并优化现有产品。
        </p> -->
      </div>
      <div class="foot">
        <h1>联系我们</h1>
        <!-- <h2>文化事业部</h2> -->
        <p>邮箱：{{jobDetailData.mail}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      jobDetailData: []
    }
  },
  created () {
    const id = this.$route.query.id
    this.$http.getJobDetail(id).then((res) => {
      if (res.data.code === 0) {
        this.jobDetailData = res.data.data
      } else {
        this.$message.error('请求失败，请重试！')
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.center {
  max-width: 1200px;
  margin: 0 auto;
  font-family: PingFang SC;
  padding: 90px 0;
  .head {
    h1 {
      font-size: 48px;
      font-weight: bold;
      line-height: 40px;
      color: #333333;
    }
    p {
      font-size: 20px;
      color: #666666;
      font-weight: Regular;
      line-height: 50px;
    }
  }
  .body {
    .title {
      font-size: 32px;
      font-weight: Regular;
      line-height: 40px;
      color: #333333;
      margin-top: 70px;
    }
    p {
      font-size: 20px;
      color: #666666;
      font-weight: Regular;
      line-height: 28px;
      margin-top: 70px;
    }
  }
  .foot {
    font-family: PingFang SC;
    h1 {
      font-size: 36px;
      font-weight: bold;
      line-height: 50px;
      color: #333333;
      margin-bottom: 40px;
      margin-top: 80px;
    }
    h2,
    p {
      font-size: 28px;
      font-weight: bold;
      line-height: 40px;
      color: #333333;
    }
  }
}
</style>
